<template>
    <div class='container'>
        <el-dialog
            :title="showTitle"
            :visible="value"
            width="50%"
            @close="handleClose"
        >
            <el-form
                :model="formData"
                :rules="rules"
                ref="formDataRef"
                label-width="100px"
                status-icon
            >
                <el-form-item
                    label="文章标题:"
                    prop="title"
                >
                    <el-input
                        placeholder="请输入文章标题"
                        v-model="formData.title"
                    ></el-input>
                </el-form-item>
                <!-- 数据formData。articleBody -->
                <!-- 规则rules。articleBody -->
                <el-form-item
                    label="文章内容:"
                    prop="articleBody"
                >
                    <quill-editor
                        :options="editorOption"
                        v-model="formData.articleBody"
                        @blur="$refs.formDataRef.validateField('articleBody')"

                    ></quill-editor>
                </el-form-item>
                <el-form-item label="视频地址：">
                    <el-input v-model="formData.videoURL"></el-input>
                </el-form-item>
            </el-form>
            <template
                slot="footer"
                class="dialog-footer"
            >
                <el-button @click="handleClose">取 消</el-button>
                <el-button type="primary" @click="addArticle">确 定</el-button>
            </template>
        </el-dialog>

    </div>
</template>

<script>
import { add, update, detail } from '@/api/hmmm/articles.js'
export default {
  props: {
    value: {
      type: Boolean,
      require: true
    }
  },
  data () {
    const checkArticleBody = (rule, value, callback) => {
      if (!value) {
        return callback(new Error('内容不能为空'))
      }
      callback()
    }
    return {
      formData: {
        title: '',
        articleBody: '',
        videoURL: ''
      },
      editorOption: {
        modules: {
          toolbar: [
            ['bold', 'italic', 'underline', 'strike'], // 加粗，斜体，下划线，删除线
            [{ list: 'ordered' }, { list: 'bullet' }], // 有序列表，无序列表
            ['blockquote', 'code-block'], // 引用，代码块
            ['image', 'link'] // 上传图片、上传视频
          ]
        },
        placeholder: '请输入内容'
      },
      rules: {
        title: [
          { required: true, message: '请输入文章标题', trigger: 'blur' }
        ],
        articleBody: [
          { validator: checkArticleBody, required: true, trigger: 'blur' }
        ]
      }
    }
  },
  computed: {
    showTitle () {
      return this.formData.id ? '修改文章' : '新增文章'
    }
  },
  methods: {
    handleClose () {
      this.$emit('input', false)
      this.formData = this.$options.data().formData
      this.$refs.formDataRef.resetFields()
    },
    async addArticle () {
      try {
        await this.$refs.formDataRef.validate()
        if (this.formData.id) {
          await update(this.formData)
        } else {
          await add(this.formData)
        }
        this.$emit('input', false)
        this.$message.success('操作成功')
        this.$parent.getArticleList()
      } catch (error) {
        console.log(error)
      }
    },
    async getArticleDetail (data) {
      const formData = await detail(data)
      this.formData = formData.data
    }
  }
}
</script>

<style scoped lang='scss'>
::v-deep .ql-editor {
    height: 200px;
}
</style>
